{% extends "base.html" %}

{% block title %}像素工坊 - 角色生成{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- 左侧预览区 -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">角色预览</h5>
                    <div class="preview-container" style="background-color: #2a2a2a; border-radius: 8px; padding: 20px;">
                        <canvas id="characterPreview" width="256" height="256"></canvas>
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-primary me-2" id="generateBtn">生成角色</button>
                        <button class="btn btn-outline-secondary me-2" id="downloadBtn">下载</button>
                        <button class="btn btn-outline-secondary" id="downloadSpriteSheet">下载动画表</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧控制面板 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">角色设置</h5>
                    
                    <!-- 预设模板 -->
                    <div class="mb-3">
                        <label class="form-label">预设模板</label>
                        <select class="form-select" id="templateSelect">
                            <option value="warrior">战士</option>
                            <option value="mage">法师</option>
                            <option value="archer">弓箭手</option>
                            <option value="monster">怪物</option>
                        </select>
                    </div>

                    <!-- 基础设置 -->
                    <div class="mb-3">
                        <label class="form-label">体型</label>
                        <select class="form-select" id="bodyType">
                            <option value="normal">普通</option>
                            <option value="slim">瘦小</option>
                            <option value="muscular">魁梧</option>
                        </select>
                    </div>

                    <!-- 颜色设置 -->
                    <div class="mb-3">
                        <label class="form-label">调色板</label>
                        <div class="d-flex gap-2 mb-2">
                            <input type="color" class="form-control form-control-color" id="primaryColor" value="#7C3AED">
                            <input type="color" class="form-control form-control-color" id="secondaryColor" value="#4F46E5">
                        </div>
                    </div>

                    <!-- 像素设置 -->
                    <div class="mb-3">
                        <label class="form-label">像素大小</label>
                        <input type="range" class="form-range" id="pixelSize" min="1" max="8" value="4">
                    </div>

                    <!-- 动画设置 -->
                    <div class="mb-3">
                        <label class="form-label">动作</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="animation" id="idle" checked>
                            <label class="btn btn-outline-primary" for="idle">站立</label>
                            <input type="radio" class="btn-check" name="animation" id="walk">
                            <label class="btn btn-outline-primary" for="walk">行走</label>
                            <input type="radio" class="btn-check" name="animation" id="attack">
                            <label class="btn btn-outline-primary" for="attack">攻击</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/character.js') }}" defer></script>
{% endblock %} 